<div class="recharge-form-warper">
  <form nz-form nzLayout="vertical">
    <nz-form-item>
      <nz-form-label class="form-code">
        <label>转账关联码<span>（有效期还剩：<app-countdown [second]="verifyCode?.leftSeconds"></app-countdown>）</span></label>
        <p>请在关联码失效之前，通过银行的APP进行转账，并在转账的备注中输入以下关联码。</p>
      </nz-form-label>
    </nz-form-item>
    <nz-form-item>
      <!-- <nz-input-number formControlName="amount" name="amount"></nz-input-number> -->
      <nz-input-group nzSearch nzSize="large" [nzSuffix]="suffixButton">
        <input type="text" nz-input readonly="readonly" name="verifyCode" [ngModel]="verifyCode?.verifyCode" class="code-input" value="563888" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="default" (click)="getCode()" nzSearch nzSize="large">重新获取</button>
      </ng-template>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label class="form-bank">
        <label>收款账户信息<a class="select-other fr" (click)="showBanks()">选择其他账号</a></label>
        <div class="form-bank-text">
          <p>账号：{{activeBank.bankAccountNum}}</p>
          <p>户主：{{activeBank.bankAccountName}}</p>
          <p>银行：{{activeBank.bankName}}</p>
          <p>支行：{{activeBank.bankSubBranch}}</p>
        </div>
      </nz-form-label>
    </nz-form-item>
    <nz-form-item class="recharge-btn-box">
      <p class="rule-link"><a routerLink="/member/recharge/rule">查看充值规则<i nz-icon type="right-circle" theme="fill"></i></a></p>
      <button nz-button class="submit" nzType="primary" type="button" (click)="goCreateRecharge()">已转帐</button>
      <p>转账信息填错了吗？<a routerLink="/member/recharge/unusual">提交异常充值</a></p>
    </nz-form-item>
  </form>
</div>

<nz-modal nzWidth="466px" class="banks-modal" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="null" [nzClosable]="false" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    <h4>选择收款银行</h4>
  </ng-template>

  <ng-template #modalContent>
    <ul class="bank-info-list">
      <li class="form-bank-text" *ngFor="let item of banks" [ngClass]="{'active':item.bankAccountNum==tempBank.bankAccountNum}" (click)="selectBank(item)">
          <p>账号：{{item.bankAccountNum}}</p>
          <p>户主：{{item.bankAccountName}}</p>
          <p>银行：{{item.bankName}}</p>
          <p>支行：{{activeBank.bankSubBranch}}</p>
      </li>
      
    </ul>
    <div class="from-footer">
      <button nz-button nzType="primary" (click)="handleOk()">确认</button>
      <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    </div>
  </ng-template>
</nz-modal>
